<div th:fragment="control_chart_funnel">
<script type="text/javascript">
	// 示例数据
	var get_funnel_option = function()
	{
		return {
			legend : {
				data : [ '展现','点击','访问','咨询','订单' ]
			},
			tooltip:{},
			color : [ "#02af6d", "#58abf9", "#d79de3", "#f9be58", "#b5ea7c", "#fa9c7d", "#01bc6f", "#60C0DD", "#D7504B", "#C6E579", "#F4E001", "#26C0C0" ],
			series : [],
			sql : ""
		};
	}
	/** 漏斗图元数据 */
	function metadata_funnel(params)
	{
		var series = {
			type : 'funnel',
			column : "SUMVALUE",
			name : "系列一",
			left: '10%',
	        top: '10%',
	        width: '50%',
            height: '50%',
	        sort: 'descending',
	        funnelAlign : 'center',
	        radius : [ '60%', '80%' ],
	        center : [ '50%', '50%' ],
			label: {
	                normal: {
	                    show: true,
	                    position: 'inside'
	                },
	                emphasis: {
	                    textStyle: {
	                        fontSize: 20
	                    }
	                }
	            },
            labelLine: {
                normal: {
                    length: 10,
                    lineStyle: {
                        width: 1,
                        type: 'solid'
                    }
                }
            },
			data : [ 
				 			{value: 60, name: '展现'},
			                {value: 40, name: '点击'},
			                {value: 20, name: '访问'},
			                {value: 80, name: '咨询'},
			                {value: 100, name: '订单'} ],
			} 
		var opt = get_funnel_option();// 每个视图创建新的option，防止相互污染
		opt.series.push(series);
		params = $.extend({}, {
			DATASET : {
				series : series
			},
			OPTION : opt
		}, params);
		return $.extend(new metadata_chart_base(params), this);
	}

	/** 漏斗图 元数据视图 面板视图 */
	function metadata_view_funnel(control)
	{
		this.DATASET = function()
		{
			var view = $($("#DATASET").html());
			var _this = this;
			var option = this.control.getMetadata("OPTION");
			var seriesData = $.extend({}, this.control.getMetadata("DATASET").series);
			var series = option.series, sql = option.sql;

			var setDataSetDetail = function(s)
			{
				var name =  s.name, column = s.column,left = s.left,top = s.top, sort = s.sort,funnelAlign = s.funnelAlign,type=s.type,radius = s.radius,label = s.label.normal.position,center = s.center,width=s.width,height=s.height;
				var detail_view = $($("#DATASET_DETAIL_FUNNEL").html());
				detail_view.find("input[name=title]").val(name);
				detail_view.find("input[name=column]").val(column);
				detail_view.find("input[name=left]").val(parseInt(left));
				detail_view.find("input[name=top]").val(parseInt(top));
				detail_view.find("select[name=sort]").val(sort);
				detail_view.find("select[name=funnelAlign]").val(funnelAlign);
				detail_view.find("input[name=radius1]").val(parseInt(radius[0]));
				detail_view.find("input[name=radius2]").val(parseInt(radius[1]));
				detail_view.find("select[name=series]").val(type);
				detail_view.find("select[name=label]").val(label);
				detail_view.find("input[name=centertop]").val(parseInt(center[1]));
				detail_view.find("input[name=centerleft]").val(parseInt(center[0]));
				detail_view.find("input[name=width]").val(parseInt(width));
				detail_view.find("input[name=height]").val(parseInt(height));
				detail_view.find("select[name=series]").change(function(){
					var type = $(this).val();
					if(type=='pie'){
					$(this).parents('table').find('.pie').show();
					$(this).parents('table').find('.funnel').hide();
					}else if(type=='funnel'){
						$(this).parents('table').find('.pie').hide();
						$(this).parents('table').find('.funnel').show();
					}
				})
				
				detail_view.find("select[name=series]").trigger("change");
				return detail_view;
			}
			var getDataSetDeatil = function()
			{
				option.sql = $(view).find("textarea").val();
				$(view).find(".dataset_detail").each(function(i, item)
				{
					var n = $(item).find("input[name=title]").val();
					var c = $(item).find("input[name=column]").val();
					var l = $(item).find("input[name=left]").val();
					var t = $(item).find("input[name=top]").val();
					var s = $(item).find("select[name=sort]").val();
					var f = $(item).find("select[name=funnelAlign]").val();
					var r1 = $(item).find("input[name=radius1]").val();
					var r2 = $(item).find("input[name=radius2]").val();
					var type = $(item).find("select[name=series]").val();
					var label = $(item).find("select[name=label]").val();
					var centerleft = $(item).find("input[name=centerleft]").val();
					var centertop= $(item).find("input[name=centertop]").val();
					var w= $(item).find("input[name=width]").val();
					var h= $(item).find("input[name=height]").val();
					var v = option.series[i].data[0].value;
					$.extend(option.series[i], {
						name : n,
						column : c,
						left : l+"%",
						top : t+"%",
						sort : s,
						funnelAlign : f,
						type : type,
						radius : [ r1 + "%", r2 + "%" ],
						center : [ centerleft + "%", centertop + "%" ],
						width  : w+"%",
				        height : h+"%",
						label : {
							normal : {
								position : label
							}
						}
					});
				});
			}

			$(view).find("textarea").val(sql);
			for ( var i in series)
			{
				console.log("setDataSetDetail");
				$(view).append(setDataSetDetail(series[i]));
			}
			//增加按钮
			view.find(".add-btn").click(function()
			{
				console.log('seriesData:'+JSON.stringify(seriesData));
				console.log('option:'+JSON.stringify(option));
				var p = $.extend({}, seriesData);
				option.series.push(p);
				$(view).append(setDataSetDetail(p));
				_this.linkViewOption(option);
			});
			//系列名、字段名
			view.on("keyup", "input,textarea", function()
			{
				getDataSetDeatil();
				_this.linkViewOption(option);
			});
			view.on("focus", "input,textarea", function()
			{
				$(this).popover("show");
			});
			view.on("blur", "input,textarea", function()
			{
				$(this).popover("hide");
			});
			view.on("change", "select", function()
			{
			 	var type = $(this).val();
			 	if(type=='pie'){
			 		console.log($(this).parents('table').find('.pie'));
					$(this).parents('table').find('.pie').show();
					$(this).parents('table').find('.funnel').hide();
					}else if(type=='funnel'){
						console.log('funnel');
						$(this).parents('table').find('.pie').hide();
						$(this).parents('table').find('.funnel').show();
					}
				getDataSetDeatil();
				_this.linkViewOption(option);
			});
			view.on("focus", "select", function()
			{
				$(this).popover("show");
			});
			view.on("blur", "select", function()
			{
				$(this).popover("hide");
			});
			//SQL执行按钮
			view.on("click", ".sql-btn", function()
			{
				var sql = $(view).find("textarea").val();
				queryChartBySql(sql, "funnel", function(result)
						{
					try
					{
						if (result.state == "true")
						{
							option.legend.data = result.legend;
							for(var i in series){
								series[i].data = result[series[i].column];
							}
							_this.linkViewOption(option);
						} else
						{
							$.QuickAlert.alertFail({
								content : result.faultInfo
							});
						}
					} catch (e)
					{
						console.error(e);
					}
				});
			});
			//删除按钮
			view.on("click", ".delete-btn", function()
			{
				var index = $(this).index(".delete-btn");
				option.series.splice(index, 1);
				$(this).parents(".dataset_detail").remove();
				_this.linkViewOption(option);
			});
			$(this.settingPanel).append(view);
		}

		return $.extend(new metadata_view_chart_base(control), this);
	}

	/** 漏斗图 表单视图 */
	function metadata_form_view_funnel(control)
	{
		this.control = control;
		this.echart = echarts.init($(control).find(".echarts-div")[0]);
		return $.extend(new metadata_form_view_chart_base(control), this);
	}
	
</script>


<!-- 控制面板 图表 dataSet详细配置 -->
<script type="text/html" id="DATASET_DETAIL_FUNNEL">
<div class="dataset_detail">
	<table class="setting-control-table" style=" border-collapse:collapse;">
		<tr style=" border: 1px solid #CFCFCF;border-bottom:none; ">
			<td class="setting-control-label">名称</td>
			<td  ><input name="title" class="form-control"></td>
			<td class="setting-control-label" >字段</td>
			<td  ><input name="column" class="form-control"></td>
			<td>
				<select name="series" class="form-control" style="width:100px;" id="series_type">
					<option value="pie">饼图</option>
					<option value="funnel">漏斗图</option>
				</select>
			</td>
			<td>
				<a href="javascript:;" class="btn btn-default btn-sm delete-btn">删除</a>
			</td>
		</tr>
		<tr class="funnel" style=" border: 1px solid #CFCFCF;border-top:none;border-bottom:none; ">
			<td class="setting-control-label80">LEFT(%)</td>
			<td><input name="left" class="form-control" data-content="图表距左百分比" data-trigger="manual" data-placement="bottom"></td>
			<td class="setting-control-label80">TOP(%)</td>
			<td><input name="top" class="form-control" data-content="图表距顶百分比" data-trigger="manual" data-placement="bottom"></td>
			<td class="setting-control-label">布局类型</td>
			<td>
				<select name="funnelAlign" class="form-control" style="width:80px;" data-content="水平方向对齐布局类型" data-trigger="manual" data-placement="bottom">
					<option value="left">左对齐</option>
					<option value="right">右对齐</option>
					<option value="center">居中</option>
				</select>
			</td>
		</tr>
		<tr class="funnel" style="border: 1px solid #CFCFCF;border-top:none;" >
			<td class="setting-control-label80">WIDTH(%)</td>
			<td><input name="width" class="form-control" data-content="图表宽度" data-trigger="manual" data-placement="bottom"></td>
			<td class="setting-control-label80">HEIGHT(%)</td>
			<td><input name="height" class="form-control" data-content="图表高度" data-trigger="manual" data-placement="bottom"></td>
			<td class="setting-control-label">数据排序</td>
			<td>
				<select name="sort" class="form-control" style="width:80px;" data-content="数据排序方式" data-trigger="manual" data-placement="bottom">
					<option value="ascending">正序</option>
					<option value="descending">倒序</option>
					<option value="none">无序</option>
				</select>
			</td>
			
		</tr>
		<tr class="pie" style="display:none;border: 1px solid #CFCFCF;border-top:none;border-bottom:none;">
			<td class="setting-control-label80">内半径(%)</td>
			<td  ><input name="radius1" class="form-control" data-content="图表内半径占百分比" data-trigger="manual" data-placement="bottom"></td>
			<td class="setting-control-label80">外半径(%)</td>
			<td  ><input name="radius2" class="form-control" data-content="图表外半径占百分比" data-trigger="manual" data-placement="bottom"></td>
			<td class="setting-control-label">标题位置</td>
			<td>
				<select name="label" class="form-control" style="width:80px;" data-content="标题显示位置外部、图形、中心" data-trigger="manual" data-placement="bottom">
					<option value="outer">外部</option>
					<option value="inside">图形</option>
					<option value="center">中心</option>
				</select>
			</td>
		</tr>
		<tr class="pie" style="display:none;border: 1px solid #CFCFCF;border-top:none;" >
			<td class="setting-control-label">TOP(%)</td>
			<td  ><input name="centertop" class="form-control" data-content="距顶部占百分比" data-trigger="manual"  data-placement="bottom"></td>
			<td class="setting-control-label">LEFT(%)</td>
			<td  ><input name="centerleft" class="form-control" data-content="距右部占百分比" data-trigger="manual"  data-placement="bottom"></td>
			<td></td>
			<td></td>
		</tr>
	</table>
</div>
</script>
</div>